<template>
	<view class="content">
		<u-navbar bgColor="#fff" :placeholder="true" :fixed="true" @leftClick="$back" title="发布评价" titleStyle="{'color': '#000'}">
			
		</u-navbar>
		<view class="ding">
			<view class="top">
				<view class="pititle">
					您对写手满意吗？
				</view>
			</view>
			<view class="user_box" v-if="orderInfo && orderInfo.writer">
				<image :src="(orderInfo.writer && orderInfo.writer.pic) | formatImgUrl"  mode=""></image>
				<view class="info">
					<view class="username">
						<view class="name">
							{{orderInfo.writer && orderInfo.writer.username}}
						</view>
					<image
						:src="$options.filters.formatImgUrl(orderInfo.writer && orderInfo.writer.writer_level && orderInfo.writer.writer_level.is_active?orderInfo.writer&&orderInfo.writer.writer_level&&orderInfo.writer.writer_level.level.image:orderInfo.writer&&orderInfo.writer.writer_level.level.hide_img)"
						@click="$go('/pages/user/grade?uid='+orderInfo.writer&&orderInfo.writer.membe_id)" class="danpic" mode=""
						v-if="orderInfo.writer&&orderInfo.writer.is_writer">
					</image>
									
								
					<image v-if="orderInfo.writer&&orderInfo.writer.user_level&& orderInfo.writer.user_level.is_active"
							:src="!orderInfo.writer.user_level.level?'':($options.filters.formatImgUrl(orderInfo.writer&&orderInfo.writer.user_level&&orderInfo.writer.user_level.active_day>0?orderInfo.writer&&orderInfo.writer.user_level&&orderInfo.writer.user_level.level.image:orderInfo.writer&&orderInfo.writer.user_level&&orderInfo.writer.user_level.level.hide_img))"
							class="danji" mode="" >
						</image>
					</view>
				
					<view class="finish_time">
						{{!orderInfo.qr_time?orderInfo.update_time_str.substring(0,16):orderInfo.qr_time.substring(0,16)}}完成订单
					</view>
				</view>
			</view>
			
			<view class="emoji_evaluate">
				<view class="item" v-for="i in emojiList" :key="i.value">
					<image  v-if="form.rank!=i.value" :src="i.url | formatImgUrl" mode=""></image>
					<image  v-else :src="i.url_clone | formatImgUrl" mode=""></image>
					<text class="text">{{i.text}}</text>
				</view>
			</view>
		</view>
		<view class="ding">
			<view class="top">
				<view class="pititle">
					写手写得怎么样，文笔如何？
				</view>
			</view>
			<view class="score">
				<text>效率</text> <u-rate :count="count" @change="looks(1)" active-color="#45C4B0"  v-model="form.efficiency"></u-rate>
			</view>
			<view class="score">
				<text>内容</text> <u-rate :count="count" @change="looks(2)" active-color="#45C4B0"  v-model="form.cont"></u-rate>
			</view>
			<view class="score">
				<text>文笔</text> <u-rate :count="count" @change="looks(3)" active-color="#45C4B0"  v-model="form.writings"></u-rate>
			</view>
			<textarea maxlength="10000000000000" class="shubox" placeholder="请输入您的评价" v-model="form.eval_row"></textarea>
		</view>
		
		<view class="ti" @click="submit">
			发布评价
		</view>
	</view>
</template>
<script>
	export default { 
		data() {
			return {
				emojiList:[
					{
						url:'/uploads/api/emoji5.png',
						url_clone:'/uploads/api/emoji51.png',
						text:'很不满',
						value:'1'
					},
					{
						url:'/uploads/api/emoji4.png',
						url_clone:'/uploads/api/emoji41.png',
						text:'不满',
						value:'2'
					},
					{
						url:'/uploads/api/emoji3.png',
						url_clone:'/uploads/api/emoji31.png',
						text:'一般',
						value:'3'
					},
					{
						url:'/uploads/api/emoji2.png',
						url_clone:'/uploads/api/emoji21.png',
						text:'满意',
						value:'4'
					},
					{
						url:'/uploads/api/emoji1.png',
						url_clone:'/uploads/api/emoji11.png',
						text:'很满意',
						value:'5'
					}
				],
				type:0,
				count: 5,
				form:{
					oid:'',
					rank:5,
					eval_row:'',
					efficiency:5,
					cont:5,
					writings:5
					
				},
				orderInfo:null,
				isEdit: ''
			}
		},
		onLoad(e) {
			if(e.id){
				this.form.oid = e.id
			}else{
				this.$common.errorToShow('参数异常')
			}
			this.type = e.type
			
			this.isEdit = e.isEdit || ''
		},
		onShow() {
			this.getOrderInfo();
		},
		methods: {
			looks(type){
				//计算 满意程度
				//efficiency:5,
				// 
				let that = this;

					setTimeout(function(){
						let max_star = that.form.efficiency + that.form.cont + that.form.writings;
						console.log(max_star,that.form.efficiency,that.form.cont, that.form.writings,9797979766);
						if(max_star >= 13){
							that.form.rank = 5
						}else if(max_star >= 10){
							that.form.rank = 4
						}else if(max_star >= 7){
							that.form.rank = 3
						}else if(max_star >= 4){
							that.form.rank = 2
						}else{
							that.form.rank = 1
						}
					},0)
			
		
				// console.log(max_star,this.form.efficiency,this.form.cont, this.form.writings,9797979766);
				
				
				
				
				//this.form.rank
				
				/*
				上下板块关联，星数分别对应
				0-3星很不满，4-6星不满，7-9星一般，10-12星满意，13-15星很满意。一般及以下满意度的评价必须附带文本内容才可以发布
				*/
				
			},
			getOrderInfo(id) {
				this.$api.default.request('order/orderInfo', {
					id: this.form.oid
				}).then((res) => {
					if (res.code) {
						this.orderInfo = res.data
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			},
			submit(){
				this.$api.default.request('order/postEval', this.form).then((res) => {
					if (res.code == 1) {
						this.$common.successToShow(res.msg,()=>{
							// 
							if(this.type==0){
								uni.navigateBack()
							}else{
								uni.reLaunch({
									url: '/pages/user/user'
								})
							}
						})
					}
				})
				
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: rgba(242, 245, 242, 1);
	}
	.content {
		padding-top: 20rpx;
		.ding{
			background-color: #ffffff;
			margin-bottom: 20rpx;
			padding: 40rpx 60rpx;
			.top{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 8rpx 20rpx;
				border-bottom: 1px solid rgba(153, 153, 153, 0.1);
				.pititle{
					font-size: 28rpx;
					font-weight: bold;
					color: #3D3D3D;
				}
			}
			.user_box{
				margin-top: 28rpx;
				display: flex;
				align-items: center;
				
				image{
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					object-fit: cover;
				}
				
				.info{
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					margin-left: 12rpx;
					.username{
						display: flex;
						font-size: 28rpx;
						font-weight: bold;
						align-items: center;
						color: #3D3D3D;
						image{
							width: 100rpx;
							height: 43rpx;
							margin-left: 8rpx;
							object-fit: cover;
						}
					}
					.finish_time{
						font-size: 24rpx;
						color: #999999;
					}
				}
			}
			.emoji_evaluate{
				margin-top: 40rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;
				.item{
					display: flex;
					flex-direction: column;
					justify-items: center;
					align-items: center;
					image{
						width: 28rpx;
						height: 28rpx;
						object-fit: cover;
						margin-bottom: 8rpx;
					}
					.text{
						font-size: 20rpx;
						color: #999999;
					}
				}
			}
			.score{
				margin-top: 34rpx;
				font-size: 28rpx;
				font-weight: bold;
				color: #3D3D3D;
				display: flex;
				text{
					margin-right: 20rpx;
				}
			}
		}
		.shubox{
			padding: 20rpx 8rpx;
			border-radius: 8rpx;
			color: #3d3d3d;
			font-size: 28rpx;
			height: 280rpx;
			margin-top: 30rpx;
			background: rgba(216, 216, 216, 0.3);
		}
		.ti{
			width: 630rpx;
			height: 86rpx;
			border-radius: 8px;
			line-height: 86rpx;
			margin: 0 auto;
			opacity: 1;
			background: #45C4B0;
			font-size: 32rpx;
			font-weight: bold;
			text-align: center;
			letter-spacing: 0em;
			color: #FFFFFF;
		}
	}
</style>